<template>
  <view-box ref="viewBox" body-padding-bottom="55px">
    <group title="请选择会员等级">
      <radio :options="options" v-model="level"></radio>
    </group>
    <box gap="20px 10px">
      <x-button type="warn" @click.native="generateOrder" :show-loading="paying" :disabled="disabled">升级会员（￥{{price}}）</x-button>
    </box>
  </view-box>
</template>
<script>
  import { ViewBox, Group, Radio, Box, XButton } from 'vux'
  export default {
    data () {
      return {
        level: 0,
        data: [],
        paying: false
      }
    },
    components: {
      ViewBox,
      Group,
      Radio,
      Box,
      XButton
    },
    computed: {
      options () {
        let options = []
        this.data.forEach((item) => {
          options.push({
            key: item.id,
            value: item.name + '（全场享受' + item.discount_desc + '优惠）'
          })
        })
        return options
      },
      price () {
        let price = 0
        this.data.forEach((item) => {
          if (item.id === this.level) {
            price = item.condition
          }
        })
        return price
      },
      userInfo () {
        return this.$store.getters.userInfo
      },
      disabled () {
        if (this.userInfo && this.userInfo.level_id < this.level) {
          return false
        }
        return true
      }
    },
    mounted () {
      this._getData()
    },
    methods: {
      generateOrder () {
        // check product data
        if (!this.level) {
          this.$vux.toast.show('请选择升级的会员')
          return false
        }
        this.paying = true
        this.$http.post('/upgrades', {level_id: this.level}).then((response) => {
          // 支付
          this._pay(response.data)
        }).catch((error) => {
          this.paying = false
          console.log(error)
        })
      },
      _pay (json) {
        let callpay = () => {
          if (typeof WeixinJSBridge === 'undefined') {
            if (document.addEventListener) {
              document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
            } else if (document.attachEvent) {
              document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
              document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
            }
          } else {
            onBridgeReady()
          }
        }
        let onBridgeReady = () => {
          WeixinJSBridge.invoke('getBrandWCPayRequest', json, (res) => {
            if (res.err_msg === 'get_brand_wcpay_request:ok') {
              this.$store.dispatch('getUserInfo')
              this.$router.replace('/user')
            } else {
              this.$router.replace('/user')
            }
          })
        }
        callpay()
      },
      _getData () {
        this.$vux.loading.show()
        this.$http.get('/levels').then((response) => {
          this.$vux.loading.hide()
          this.data = response.data
          if (this.data.length) {
            this.level = this.data[this.data.length - 1].id
          }
        })
      }
    }
  }
</script>
<style scoped lang="less">
  
</style>